<template>
  <div>
    <!-- 头部 -->
		<div class="cen_header">
			<div class="cen_header_top" @click="handleUserClick">
					<div class="cen_header_vipicon">
						<!-- 是vip加入i标签 -->
						<i></i> 
						<img src="@/assets/mine/cen_photo.png" alt="">
						
					</div>
					<div class="cen_header_data">
						<p>
							建工社账号:
							<!-- 未绑定
							<span>
								未绑定
								<em>去绑定</em>
							</span> -->
							<!-- 绑定 -->
							<span>25685685</span>
						</p>
						<p>
							微信识别号:
							<span>1234567876t</span>
						</p>
						<p>
							手机号:<!--未绑定-->
							<span>
								<span>未绑定</span>
								<em>去绑定</em>
							</span> 
							<!-- 绑定 
							<span>13512345691</span>-->
						</p>
						<!-- 右箭头 -->
						<a href="#">
							<span class="cen_header_top_right"></span>
						</a>
					</div>
			</div>
			<!-- VIP会员 -->
			<div class="cen_header_vip">
				<a href="#">
					<span>VIP会员</span>
					
					<!-- 未开通-->
					<span>开通即享<b>N</b>种会员权益</span>
					<div class="cen_header_novip">立即开通</div>
					
					<!-- 已开通
					<span>点击查看您的会员权益</span> -->
				</a>
			</div>
		</div>

		<!-- 我的课程 -->
		<div class="cen_mid_myclass">
			<ul>
				<li>
					<a href="#">
						<img src="@/assets/mine/cen_class_img1.png" alt="">
						<span>我的录播课</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="@/assets/mine/cen_class_img3.png" alt="">
						<span>我的直播课</span>
						<em></em>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="@/assets/mine/cen_class_img2.png" alt="">
						<span>我的音频课</span>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="@/assets/mine/cen_class_img4.png" alt="">
						<span>我的公开课</span>
					</a>
				</li>
			</ul>
			<!-- 已开通会员 -->
			<!---->
			<div class="cen_mid_class_exam">
				<p>
					<span style="color: #666;">意向考试:&nbsp;</span>
					<span>二级建造师</span>
				</p>
				<p>
					<a href="#" class="cen_mid_select">
						还剩<span>123</span>天考试
					</a>
				</p>
			</div>
			<!--未开通会员
			<div class="cen_mid_class_exam">
				<p>
					<span style="color: #666;">意向考试:&nbsp</span>
					
				</p>
				<p>
					<a href="#" class="cen_mid_select">
						点击此处选择您的意向考试
					</a>
				</p>
			</div>--> 
		</div>
    <div style="padding-bottom: 15px;">
			<div class="cen_mid_myclass cen_list_myclass">
					<ul>
						<li>
							<a href="#">
								<img src="@/assets/mine/cen_img1.png" alt="">
								<span>我的题库</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="@/assets/mine/cen_img2.png" alt="">
								<span>在线答疑</span>
								<em></em>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="@/assets/mine/cen_img3.png" alt="">
								<span>每日一练</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="@/assets/mine/cen_img4.png" alt="">
								<span>增值服务包</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="@/assets/mine/cen_img11.png" alt="">
								<span>我的购物车</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="@/assets/mine/cen_img5.png" alt="">
								<span>我的订单</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="@/assets/mine/cen_img6.png" alt="">
								<span>我的钱包</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="@/assets/mine/cen_img7.png" alt="">
								<span>优惠券</span>
								<em class="cou"></em>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="@/assets/mine/cen_img8.png" alt="">
								<span>我的赠书</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="@/assets/mine/cen_img9.png" alt="">
								<span>我的文档</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="@/assets/mine/cen_img10.png" alt="">
								<span>平台使用指南</span>
							</a>
						</li>
					</ul>
			</div>
		</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data(){
    return {

    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
		// console.log(this.user)
  },
  methods: {
    handleUserClick () {
      if (this.user && this.user.userId) {
        return
      }
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="scss" scoped>
.cen_header {
	width: 100%;
	height: 3.19rem;
	background: url(~@/assets/mine/cen_header_bg.png) no-repeat center/100%;
	// background: #e6ce8e;
  position: relative;
}

.cen_header_top {
	padding: 10px 15px 0;
	display: flex;
	align-items: center;

}

.cen_header_top .cen_header_vipicon {
	width: 82px;
	height: 82px;
	padding: 7px;
	flex-shrink: 0;
	position: relative;
}

.cen_header_top .cen_header_vipicon i {
	display: block;
	width: 30px;
	height: 27px;
	// background: url(../images/cen_vip_icon.png) no-repeat center/100%;
	background: #e6ce8e;
  position: absolute;
	bottom: 0;
	right: 0;
}

.cen_header_vipicon img {
	width: 67px;
	height: 67px;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
}

.cen_header_top .cen_header_data {
	width: calc(100% - 82px);
	padding-left: 14px;
	position: relative;
}

.cen_header_top .cen_header_data p {
	color: #fff;
	margin-bottom: 4px;
	font: 500 14px "";

}

.cen_header_top .cen_header_data span em {
	display: inline-block;
	font-size: 12px;
	padding: 3px 10px;
	background: rgba(255, 255, 255, 0.4);
	text-align: center;
	border-radius: 20px;
	margin-left: 4px;
}

.cen_header_top .cen_header_data p:last-child {
	margin-bottom: 0;
}

.cen_header_top .cen_header_top_right {
	display: block;
	width: 8px;
	height: 14px;
	// background: url(../images/cen_right.png) no-repeat center/100%;
	background: #e6ce8e;
  position: absolute;
	right: 0;
	top: 50%;
	margin-top: -7px;
}

.cen_header_vip {
	position: absolute;
	bottom: 6%;
	left: 10%;
}

.cen_header_vip span{
	background-image: -webkit-linear-gradient(-65deg, #e6ce8e, #f0e8ca, #fdda81);
	font: 14px "";
}

.cen_header_vip span:first-child {
	font-weight: bold;
	margin-right: 15px;

}

.cen_header_vip span b {
	-webkit-text-fill-color: #ff0000;
	font-size: 18px;
	padding: 0 3px;

}

.cen_header_vip div.cen_header_novip {
	display: inline-block;
	width: 64px;
	height: 18px;
	border-radius: 18px;
	background-color: #f2d190;
	font: 12px/18px "";
	text-align: center;
	color: #222;
	margin-left: 14px;
}

.cen_mid_myclass {
	width: calc(100% - 30px);
	margin: 7px auto 15px;
	background: #fff;
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
	border-radius: 6px;

}

.cen_mid_myclass ul {
	display: flex;
	padding: 8px 0 15px;
	border-bottom: 1px solid #e5e5e5;
}

.cen_mid_myclass ul li {
	width: 25%;
	position: relative;
	text-align: center;
}

.cen_mid_myclass ul li img {
	width: 58px;
}

.cen_mid_myclass ul li span {
	display: block;
	font: 14px "";
	color: #333;
}

.cen_mid_myclass ul li em {
	width: 32px;
	height: 16px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -32px 0 0 5px;
	// background: url(../images/cen_myclass_today.png) no-repeat left center/100%;
  background: #e6ce8e;
}

.cen_list_myclass {
	margin-bottom: 0;
}

.cen_list_myclass ul li em {
	// background-image: url(../images/cen_list_icon.png);
  background: #e6ce8e;
}

.cen_list_myclass ul li em.cou {
	// background-image: url(../images/cen_list_new.png);
  background: #e6ce8e;
	margin-top: -30px;
}

.cen_mid_class_exam {
	display: flex;
	justify-content: space-between;
	padding: 15px;
}

.cen_mid_class_exam p {
  font-size: 16px;
	color: #333;

}

.cen_mid_class_exam p .cen_mid_select {
	padding-right: 20px;
  background: #e6ce8e;
	// background: url(../images/cen_ic_right.png) no-repeat right center/14px 14px;
	color: #333;

}

.cen_mid_class_exam p .cen_mid_select span {
	color: #F22213;
	font: 500 15px "";
}
.cen_list_myclass ul {
	width: 100%;
	padding: 20px 0 0;
	border-bottom: 0;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.cen_list_myclass ul li {
	width: 25%;
	margin-bottom: 20px;
}

.cen_list_myclass ul li img {
	width: 32px;
	height: 32px;
	margin-bottom: 6px;
}

.cen_list_myclass ul li span {
	font: 14px "";
}

.center_ser {
	display: block;
	border-radius: 50%;
	width: 50px;
	height: 50px;
  background: #e6ce8e;
	// background: url(../images/cen_ser.png) no-repeat center/100%;
	position: fixed;
	top: 7.8rem;
	right: 0;
	z-index: 9999;
}
</style>